<!--
 * @Author: zulezhe
 * @Date: 2021-01-29 14:52:16
 * @LastEditors: zulezhe
 * @LastEditTime: 2021-02-04 17:38:11
 * @Description: In User Settings Edit
 * @FilePath: \canvas\02-进阶\06.椭圆.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
      }
      #canvas-container {
        width: 60%;
        height: 90%;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
      }
      .header {
        height: 10%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .header .handle-button {
        width: 100px;
        height: 40px;
        border-radius: 4px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        background: linear-gradient(217deg, #e84393, #e17055);
        color: #fff;
        font-weight: 600;
        transition: all 0.1s cubic-bezier(0.42, 0, 1, 1) 0s;
      }
      .header .handle-button:focus {
        color: yellow;
      }
      .header .handle-button:active {
        transform: scale(1.1);
      }
      .main {
        height: 80%;
        width: 100%;
        border: 1px solid #aaa;
      }
    </style>
  </head>
  <body>
    <div id="canvas-container">
      <div class="header">
        <div class="handle-button" id="handle-button"><span>执行</span></div>
      </div>
      <div class="main" id="main">
        <canvas id="canvas"></canvas>
      </div>
    </div>
    <script>
      /**
       * context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
       * context.ellipse(起点x,起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针)
       */
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = document.getElementById("main").offsetWidth;
      canvas.height = document.getElementById("main").offsetHeight;
      // 绘制一定角度的椭圆圆弧
      function drawEllipse(deg) {
        ctx.beginPath();
        ctx.ellipse(550, 300, 100, 50, 0, 0, (Math.PI / 180) * deg, false);
        ctx.strokeStyle = `rgba(${81 + 171 * Math.abs(1 - deg * 2)}, ${160 - 160 * Math.abs(1 - deg * 2)}, ${255},1)`;
        ctx.stroke();
      }
      let count = 0;
      function run() {
        if (count < 91) {
          drawEllipse(count * 4);
          requestAnimationFrame(run);
        }
        count++;
      }

      document.getElementById("handle-button").onclick = function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        count = 0;
        run();
      };
    </script>
  </body>
</html>
